<template>

  <div id="id">
    <top></top>
    <Navigation></Navigation>

        <br>
        <div class="cardbox">
            <div class="cardbox_mid" style="width: 70%;margin: auto;border-radius:10px; padding: 20px;background-color: #fff;margin-bottom: 100px;">
              <template>
                  <el-table
                    :data="tableData"
                    style="width: 100%;">
                    <el-table-column
                    label="商品图"
                    prop="id"
                    width="120">
                    <template slot-scope="props">
                    <el-image 
                    style="width: 60px; height: 60px;border-radius: 10px;"
                    :src="props.row.mainimage[0]"
                    :preview-src-list="srcList">
                  </el-image>
                </template>
                  </el-table-column>

                    <el-table-column
                      prop="spname"
                      label="商品名称"
                      width="260">
                    </el-table-column>
                    <el-table-column
                      prop="jointime"
                      label="加入时间"
                      width="150">
                    </el-table-column>
                    <el-table-column
                    prop="price"
                    label="单价"
                    width="90">
                  </el-table-column>
                  <el-table-column
                  prop="shoppingnum"
                  label="数量"
                  width="90">
                  
                </el-table-column>
                <el-table-column
                prop="totalprice"
                label="总价"
                width="90">
              </el-table-column>
            
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">立即下单</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
            </el-table-column>
                  </el-table>
                </template>
          </div>
        </div>
      <div class="js_card" style="width:100%;position: fixed;bottom:20px;">
        <div class="js_buttom" style="width: 70%;margin: auto;border-radius:10px;height: 30px;background-color: #dcdfd9;padding: 20px 0px 20px 20px;">
        
          <div class="js_card_box" style="width:30%;right: 0;float: right;">
          <span style="font-size: 14px;">已选商品:</span>
          <span style="font-size: 20px;color: #47eb2b;">{{num}}</span>件
          <span style="font-size: 14px;margin-left: 10px;">商品总价:</span>
          <span style="font-size: 20px;color: #47eb2b;">{{price}}</span>元
         
          </div>

        </div>
      </div>

  </div>

</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        table:[],
        num:0,
        price:0,
      }
    },
    mounted:function(){
      this.loadexecution();
  },
    methods: {

      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      


      async loadexecution(){ 
        const {data:res} = await this.$http.post('person/findShoppimgCard',this.$qs.stringify({email:JSON.parse(localStorage.getItem('email'))}));
        if(res.success==true){
          this.tableData = res.result;

          for(var i=0;i<this.tableData.length;i++)
          {
            var img =  this.tableData[i].mainimage.replace("[",""); 
                img =  img.replace("]",""); 
                img =  img.replace(/\"/g, "");

            this.tableData[i].mainimage =img.split(",");

          }

          for(var i=0;i<this.tableData.length;i++)
          {
            this.num = this.num+this.tableData[i].shoppingnum
            this.price = this.price+this.tableData[i].totalprice
          }

          this.price = (this.price).toFixed(2)
          console.log(this.tableData)
        }
      },




      //删除购物车商品
      //async 
      async handleDelete(index,id){

      const {data:res} = await this.$http.post('person/DataleShoppimgCard',this.$qs.stringify({'id':id}));
      if(res.success==true){
        this.tableData.splice(index, 1)
        this.utils.success(res.message)
      }else{
        
        this.utils.error(res.message);
      }
      },


      //单件商品创建订单
      async handleEdit(index,id){

        this.table={
              ordrNum:this.tableData[index].shoppingnum,
              orderMonry:this.tableData[index].totalprice,
              dityId:this.tableData[index].tdityid,
              orderuser:JSON.parse(localStorage.getItem('email')),
              userAddress:this.tableData[index].address,
              spname:this.tableData[index].spname
          }
          let data =this.$qs.stringify({
          dat:JSON.stringify(this.table)
       })

        const {data:res} = await this.$http.post('person/userOrder',data);
        if(res.success==true){
          this.utils.success("订单创建成功!")
          this.$router.push({path: '/userOrderPage'})
        }else{
          this.utils.error(res.message);
        }
      }





    }
  }
</script>
